<template>
  <div class="markdown-editor">
    <div class="editor-header">
      <div class="tool-bar">
        <div class="left-tools">
          <i class="fa fa-bold tool-icon" title="加粗" @click="insertText('**', '**')"></i>
          <i class="fa fa-italic tool-icon" title="斜体" @click="insertText('*', '*')"></i>
          <i class="fa fa-header tool-icon" title="标题" @click="insertText('# ', '')"></i>
          <i class="fa fa-link tool-icon" title="链接" @click="insertText('[', '](url)')"></i>
          <i class="fa fa-image tool-icon" title="图片" @click="insertText('![alt](', ')')"></i>
          <i class="fa fa-list-ul tool-icon" title="无序列表" @click="insertText('- ', '')"></i>
          <i class="fa fa-list-ol tool-icon" title="有序列表" @click="insertText('1. ', '')"></i>
          <i class="fa fa-code tool-icon" title="代码块" @click="insertText('```\n', '\n```')"></i>
        </div>
        <div class="right-tools">
          <div class="preview-switch">
            <span :class="{ active: viewMode === 'edit' }" @click="viewMode = 'edit'">编辑</span>
            <span :class="{ active: viewMode === 'preview' }" @click="viewMode = 'preview'">预览</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="editor-content">
      <div v-show="viewMode === 'edit'" class="edit-area">
        <textarea
          ref="textareaRef"
          v-model="content"
          @input="handleInput"
          placeholder="请输入文章内容..."
        ></textarea>
      </div>
      <div v-show="viewMode === 'preview'" class="preview-area markdown-body" v-html="htmlContent"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { marked } from 'marked'
import hljs from 'highlight.js'

const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const content = ref(props.modelValue)
const viewMode = ref<'edit' | 'preview'>('edit')
const textareaRef = ref<HTMLTextAreaElement>()
const htmlContent = ref('')

// 监听内容变化
watch(() => props.modelValue, (newVal) => {
  content.value = newVal
})

watch(content, (newVal) => {
  emit('update:modelValue', newVal)
  // 转换Markdown为HTML
  htmlContent.value = marked(newVal, {
    highlight: function(code, lang) {
      if (lang && hljs.getLanguage(lang)) {
        return hljs.highlight(code, { language: lang }).value
      }
      return code
    }
  })
})

// 插入Markdown语法
const insertText = (before: string, after: string) => {
  const textarea = textareaRef.value
  if (!textarea) return
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selected = content.value.substring(start, end)
  
  content.value = content.value.substring(0, start) + 
                 before + selected + after + 
                 content.value.substring(end)
                 
  // 恢复光标位置
  setTimeout(() => {
    textarea.focus()
    textarea.setSelectionRange(
      start + before.length,
      end + before.length
    )
  })
}

const handleInput = () => {
  emit('update:modelValue', content.value)
}
</script>

<style scoped lang="scss">
.markdown-editor {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  
  .editor-header {
    border-bottom: 1px solid #eee;
    padding: 10px;
    background: #f8f9fa;
    
    .tool-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .left-tools {
        display: flex;
        gap: 15px;
        
        .tool-icon {
          font-size: 16px;
          color: #666;
          cursor: pointer;
          padding: 5px;
          
          &:hover {
            color: #42b983;
          }
        }
      }
      
      .preview-switch {
        span {
          padding: 5px 15px;
          cursor: pointer;
          border-radius: 4px;
          
          &.active {
            background: #42b983;
            color: #fff;
          }
          
          &:hover:not(.active) {
            background: #f5f5f5;
          }
        }
      }
    }
  }
  
  .editor-content {
    height: calc(100vh - 300px);
    display: flex;
    
    .edit-area {
      flex: 1;
      
      textarea {
        width: 100%;
        height: 100%;
        padding: 20px;
        border: none;
        resize: none;
        outline: none;
        font-size: 14px;
        line-height: 1.6;
        font-family: 'Monaco', monospace;
      }
    }
    
    .preview-area {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background: #fff;
    }
  }
}

// Markdown预览样式
:deep(.markdown-body) {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.6;
  
  h1, h2, h3, h4, h5, h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
  }
  
  code {
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(27,31,35,0.05);
    border-radius: 6px;
  }
  
  pre code {
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f6f8fa;
    border-radius: 6px;
    display: block;
  }
}
</style> 